<template>
	<div class="shop_container" v-if="shops.length">
		<ul class="shop_list">
			<li
				class="shop_li border-1px"
				v-for="(shop, index) in shops"
				:key="index"
				@click="$router.push('/shop')"
			>
				<a>
					<div class="shop_left">
						<img class="shop_img" :src="shop.image_path" />
					</div>
					<div class="shop_right">
						<section class="shop_detail_header">
							<h4 class="shop_title">{{ shop.name }}</h4>
							<ul class="shop_detail_ul">
								<li
									class="supports"
									v-for="(support, index) in shop.supports"
									:key="index"
								>{{ support.icon_name }}</li>
							</ul>
						</section>
						<section class="shop_rating_order">
							<section class="shop_rating_order_left">
								<star :score="shop.rating" :size="24" />
								<div class="rating_section">{{ shop.rating }}</div>
								<div class="order_section">{{ shop.recent_order_num }}</div>
							</section>
							<section class="shop_rating_order_right">
								<span class="delivery_style delivery_left">{{ shop.delivery_mode.text }}</span>
								<span class="delivery_style delivery_right">准时达</span>
							</section>
						</section>
						<section class="shop_distance">
							<p class="shop_delivery_msg">
								<span>¥{{shop.float_minimum_order_amount}} 起送</span>
								<span class="segmentation">/</span>
								<span>配送费约¥{{shop.float_delivery_fee}}</span>
							</p>
						</section>
					</div>
				</a>
			</li>
		</ul>
	</div>
	<ul v-else>
		<li v-for="item in 6" :key="item">
			<img src="./images/shop_back.svg" alt />
		</li>
	</ul>
</template>

<script>
import { mapState } from "vuex";
import star from "../star/star.vue";

export default {
  props: [""],
  data() {
    return {};
  },
  computed: {
    // 接收数据库里面的shops
    ...mapState(["shops"])
  },
  components: {
    star
  },

  methods: {}
};
</script>
<style lang='stylus' rel='stylusheet/stylus'>
@import '../../common/stylus/mixins.styl'

.shop_container
	margin-bottom 50px
	.shop_list
		.shop_li
			bottom-border-1px(#f1f1f1)
			width 100%
			>a
				clearFix()
				display block
				box-sizing border-box
				padding 15px 8px
				width 100%
				.shop_left
					float left
					box-sizing border-box
					width 23%
					height 75px
					padding-right 10px
					.shop_img
						display block
						width 100%
						height 100%
				.shop_right
					float right
					width 77%
					.shop_detail_header
						clearFix()
						width 100%
						.shop_title
							text_ellipsis()
							float left
							width 200px
							color #333
							font-size 16px
							line-height 16px
							font-weight 700
							&::before
								content '品牌'
								display inline-block
								font-size 11px
								line-height 11px
								color #333
								background-color #ffd930
								padding 2px 2px
								border-radius 2px
								margin-right 5px
						.shop_detail_ul
							float right
							margin-top 3px
							.supports
								float left
								font-size 10px
								color #999
								border 1px solid #f1f1f1
								padding 0 2px
								border-radius 2px
					.shop_rating_order
						clearFix()
						width 100%
						margin-top 18px
						margin-bottom 8px
						.shop_rating_order_left
							float left
							color #ff9a0d
							.star // 2x 图 3x 图
								float left
								font-size 0
								.star-item
									display inline-block
									background-repeat no-repeat
							.rating_section
								float left
								font-size 10px
								color #ff6000
								margin-left 4px
							.order_section
								float left
								font-size 10px
								color #666
								transform scale(0.8)
						.shop_rating_order_right
							float right
							font-size 0
							.delivery_style
								transform-origin 35px 0
								transform scale(0.7)
								display inline-block
								font-size 12px
								padding 1px
								border-radius 2px
							.delivery_left
								color #fff
								margin-right -10px
								background-color #02a774
								border 1px solid #02a774
							.delivery_right
								color #02a774
								border 1px solid #02a774
					.shop_distance
						clearFix()
						width 100%
						font-size 12px
						.shop_delivery_msg
							float left
							transform-origin 0
							transform scale(0.9)
							width 200px
							color #666
						.segmentation
							color #ccc
</style>
